<template>
  <div class="my">
    <div class="title-box">
      <span>{{$t('wallet.my.account_earn')}}</span>
      <spinner class="value" v-if="loading" />
      <cu v-else class="value" :val="wallet_data.all_money | divided8" :decimals="8"></cu>
      <span class="unit">{{wallet_type}}</span>
    </div>
    <ul class="clearfix">
      <li>
        <i></i>
        <div class="fl">
          <p>
            <spinner v-if="loading" />
            <cu v-else :val="wallet_data.money | divided8" :decimals="8"></cu>
          </p>
          <p>{{$t('wallet.walletCount.available')}}</p>
        </div>
      </li>
      <li>
        <i></i>
        <div class="fl">
          <p>
            <spinner v-if="loading" />
            <cu v-else :val="wallet_data.frozen_money | divided8" :decimals="8"></cu></p>
          <p>{{$t('wallet.walletCount.all_income')}}</p>
        </div>
      </li>
      <li>
        <i></i>
        <div class="fl">
          <p>
            <spinner v-if="loading" />
            <cu v-else :val="wallet_data.in_amount | divided8" :decimals="8"></cu></p>
          <p>{{$t('wallet.my.total_income')}}</p>
        </div>
      </li>
      <li>
        <i></i>
        <div class="fl">
          <p>
            <spinner v-if="loading" />
            <cu v-else :val="wallet_data.out_amount | divided8" :decimals="8"></cu></p>
          <p>{{$t('dashboard.pay_amount')}}</p>
        </div>
      </li>
    </ul>
    <div class="button-group clearfix">
      <router-link class="fl" :to="'/wallet/bill?type='+type">{{$t('wallet.walletCount.bill')}}</router-link>
      <!-- <router-link class="fr" :to="'/wallet/forward?type='+type">提现</router-link> -->
      <button class="fr" @click="toForward" :disabled="!wallet_data.id">{{$t('wallet.my.to_forward')}}</button>
    </div>
  </div>
</template>
<script>
import { walletIncome } from '@/api';
import { mapGetters } from 'vuex';
import cu from '@/components/CountUp';
import spinner from '@/components/Spinner';

export default {
  components: {
    cu,
    spinner,
  },
  data() {
    return {
      loading: false,
      type: '',
      wallet_data: {
        all_money: 0,
        money: 0,
        frozen_money: 0,
        in_amount: 0,
        out_amount: 0,
        count: 0,
      },
    };
  },
  computed: {
    ...mapGetters(['id']),
    wallet_type() {
      return this.type.toUpperCase();
    },
  },
  beforeCreate() {
    if (this.$route.query.type === 'buc' || this.$route.query.type === 'mut') {
      this.$router.push('/404');
    }
  },
  created() {
    this.type = this.$route.query.type || 'btc';
    this.walletIncome();
  },
  methods: {
    toForward() {
      if (!this.wallet_data.count) {
        this.$confirm(`${this.$t('wallet.my.add')}${this.wallet_type}${this.$t('wallet.my.tips_two')}`, this.$t('mill.tip'), {
          confirmButtonText: this.$t('btn.go'),
          cancelButtonText: this.$t('btn.cancel'),
          type: 'warning',
        }).then(() => {
          this.$router.push('/wallet/address');
        }).catch(() => {});
      } else {
        this.$router.push(`/wallet/forward?type=${this.type}`);
      }
    },
    walletIncome() {
      this.loading = true;
      walletIncome({ parent_uid: this.id })
        .then((res) => {
          if (res.data.status === 1) {
            if (res.data.data[this.type]) {
              this.wallet_data = res.data.data[this.type];
            }
          } else {
            this.$message.error(this.$t(`api.${res.data.errcode}`));
          }
          this.loading = false;
        })
        .catch(() => {
          this.$message.error(this.$t('error.catchError'));
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.my {
  width: 100%;
  height: 100%;
  padding: 30px 125px 0 60px;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
  border: solid 1px #e0e0e0;
  .title-box {
    border-bottom: 2px solid #ebebeb;
    padding: 21px 0;
    height: 84px;
    color: #70c1b3;
    font-size: 28px;
    text-align: left;
    line-height: 42px;
    .value {
      margin-left: 30px;
      margin-right: 10px;
    }
    .unit {
      color: #333333 !important;
      margin: 0;
    }
  }
  ul {
    li {
      position: relative;
      width: 331px;
      height: 100px;
      margin-top: 50px;
      padding-left: 100px;
      box-shadow: 0px 0px 5px 0px rgba(0, 130, 108, 0.05);
      border-radius: 5px;
      box-sizing: border-box;
      padding: 20px;
      padding-right: 10px;
      box-sizing: border-box;
      i {
        display: block;
        float: left;
        width: 60px;
        height: 60px;
        margin-right: 20px;
      }
      div {
        margin-top: 10px;
        p {
          line-height: 1;
          text-align: left;
          &:nth-child(1) {
            font-size: 26px;
            color: #323232;
          }
          &:nth-child(2) {
            font-size: 14px;
            color: #565656;
            margin-top: 5px;
            padding-left: 2px;
            box-sizing: border-box;
          }
        }
      }
      &:nth-child(2n-1) {
        float: left;
      }
      &:nth-child(2n) {
        float: right;
      }
      &:nth-child(1) {
        border: solid 1px #b2dbbf;
        i {
          background: url(../../assets/images/wallet-icon1.png) #b2dbbf center
            no-repeat;
          border-radius: 50%;
          // background-size: 100% 100%;
        }
      }
      &:nth-child(2) {
        border: solid 1px #f7cc86;
        i {
          background: url(../../assets/images/wallet-icon2.png) #f7cc86 center
            no-repeat;
          border-radius: 50%;
        }
      }
      &:nth-child(3) {
        border: solid 1px #ffa3bb;
        i {
          background: url(../../assets/images/wallet-icon3.png) #ffa3bb center
            no-repeat;
          border-radius: 50%;
        }
      }
      &:nth-child(4) {
        border: solid 1px #96c6f6;
        i {
          background: url(../../assets/images/wallet-icon4.png) #96c6f6 center
            no-repeat;
          border-radius: 50%;
        }
      }
    }
  }
  .button-group {
    width: 480px;
    height: 50px;
    margin: 0 auto;
    margin-top: 120px;
    a,button {
      text-align: center;
      line-height: 50px;
      display: block;
      width: 200px;
      height: 50px;
      border-radius: 5px;
      cursor: pointer;

    }
    a{
      box-shadow: 0px 0px 5px 0px rgba(0, 130, 108, 0.05);
      border: solid 1px #e0e0e0;
      color: #565656;
    }
    button{
      outline: none;
      border: none;
      color: #fff;
      background-color: #70c1b3;
      box-shadow: 0px 7px 18px 0px rgba(0, 130, 108, 0.24);
      &:disabled{
        cursor: not-allowed;
      }
    }
    margin-bottom: 80px;
  }
}
</style>
